<template>
  <div class="container">
    <el-input
      placeholder="请输入内容"
      v-model="searchVal"
      class="input-with-select"
    >
      <template #append>
        <el-button icon="el-icon-search" @click="search(searchVal)"></el-button>
      </template>
    </el-input>
    <el-transfer
      v-model="roleValA"
      :data="transforRole"
      @change="onChange"
      :titles="treeTitles"
      style="width:100%;height:400px"
    />
  </div>
</template>

<script>
export default {
  name: "SearchTrans",
  props: {
    transforRole: {
      type: Array,
      default: function() {
        return [
          { key: 1, label: "1" },
          { key: 2, label: "2" },
        ];
      },
    },
    roleValA: {
      type: Array,
    },
    treeTitles: {
      type: Function,
    },
    search: {
      type: Function,
    },
  },
  emits: ["update:roleValA"],
  data() {
    return {
      searchVal: "",
    };
  },
  methods: {
    onChange(val) {
      this.$emit("update:roleValA", val);
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  .el-input {
    width: 200px;
    margin-bottom: 10px;
  }
  .el-transfer {
    float: right;
  }
}
/deep/ .el-transfer-panel {
  width:250px;
  .el-transfer-panel__body {
    width: 100%;
    height: 350px;
    .el-transfer-panel__list {
      height: 100%;
    }
  }
}
</style>
